<template>
	<div class="content">
		<cl-crud @load="onLoad">
			<template #slot-btn>
				<el-button
					type="danger"
					size="mini"
					@click="batchFiled(0)"
					:disabled="selectRow.length > 0 ? false : true"
					>批量隐藏</el-button
				>
				<el-button
					type="success"
					size="mini"
					@click="batchFiled(1)"
					:disabled="selectRow.length > 0 ? false : true"
					>批量显示</el-button
				>
			</template>
			<template #slot-filter>
				<div class="filter-list">
					<div class="filter-item">
						<span class="filter-title">分类：</span>
						<el-select
							size="mini"
							filterable
							placeholder="请选择分类"
							style="width: 140px"
							v-model="selects.classifyId"
							@change="val => refresh({ classifyId: val, page: 1 })"
						>
							<el-option value label="全部"></el-option>
							<el-option
								:label="item.name"
								:value="item.id"
								v-for="item in options.classify"
								:key="item.id"
							></el-option>
						</el-select>
					</div>
					<div class="filter-item">
						<span class="filter-title">状态：</span>
						<el-select
							size="mini"
							filterable
							placeholder="请选择状态"
							style="width: 140px"
							v-model="selects.status"
							@change="val => refresh({ status: val, page: 1 })"
						>
							<el-option value label="全部"></el-option>
							<el-option label="隐藏" value="0"></el-option>
							<el-option label="显示" value="1"></el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #table-column-pic="{ scope }">
				<img class="classify-icon" :src="scope.row.pic" v-if="scope.row.pic" />
				<span v-else>暂无</span>
			</template>
			<template #table-column-status="{ scope }">
				<el-switch
					v-model="scope.row.status"
					active-text="显示"
					inactive-text="隐藏"
					:active-value="1"
					:inactive-value="0"
					@change="e => onSwitchChange(e, scope.row)"
				></el-switch>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import feilListOne from '@/components/feilListOne';
export default {
	name: 'evaluate',
	data() {
		return {
			options: {
				classify: []
			},
			selects: {
				classifyId: '',
				status: ''
			},
			selectRow: []
		};
	},
	created() {
		this.$service.goods.classify
			.list({
				parentId: 0
			})
			.then(res => {
				this.options.classify = res;
			});
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.goods.classify)
				.set('search', {
					key: {
						placeholder: '请输入分类名称'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							label: '全选',
							align: 'center',
							width: '60px'
						},
						// {
						// 	label: '父级',
						// 	prop: 'parentName',
						// 	align: 'center',
						//     emptyText: '顶级'
						// },
						{
							label: '分类名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '分类图标',
							prop: 'pic',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						}
					],
					props: {
						'default-sort': {
							prop: 'level',
							order: 'descending'
						}
					},
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					}
				})
				.set('upsert', {
					props: {
						title: '',
						width: '500px',
						labelWidth: '120px'
					},
					items: [
						// {
						// 	prop: 'parentId',
						// 	label: '父级：',
						// 	component: {
						// 		name: 'el-select',
						// 		attrs: {
						// 			placeholder: '请选择父级分类',
						// 			clearable: true
						// 		},
						// 		options: []
						// 	},
						// 	rules: [
						// 		{
						// 			required: true,
						// 			message: '父级分类不能为空'
						// 		}
						// 	]
						// },
						{
							prop: 'name',
							label: '分类名称：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入分类名称',
									clearable: true
								}
							},
							rules: [
								{
									required: true,
									message: '分类名称不能为空'
								}
							]
						},
						{
							prop: 'pic',
							label: '分类图标：',
							component: feilListOne
						},
						{
							prop: 'level',
							label: '排序：',
							value: 0,
							component: {
								name: 'el-input-number',
								attrs: {
									placeholder: '请输入排序',
									clearable: true
								}
							},
							rules: [
								{
									required: true,
									message: '排序不能为空'
								}
							]
						},
						{
							prop: 'status',
							label: '状态：',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '显示',
										value: 1
									},
									{
										label: '隐藏',
										value: 0
									}
								]
							},
							rules: {
								required: true,
								message: '状态不能为空'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', isEdit => {
					if (isEdit) {
						app.setData('upsert.props.title', '编辑分类');
					} else {
						app.setData('upsert.props.title', '新增分类');
					}
					let classify = [{ label: '一级分类', value: 0 }];
					this.options.classify.forEach(item => {
						classify.push({
							label: item.name,
							value: item.id
						});
					});
					app.setData('upsert.items[prop:parentId].component.options', classify);
				})
				.on('submit', (isEdit, data, { next }) => {
					next({
						...data,
						parentId: 0
					});
				})
				.on('refresh', async (params, { next, render }) => {
					const { list } = await next(params);
					// list.map(e => {
					// 	e.labelList = e.label ? e.label.split(',') : [];
					// });
					this.$service.goods.classify
						.list({
							parentId: 0
						})
						.then(res => {
							this.options.classify = res;
						});
					render(list);
				})
				.done();
			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		// 批量操作
		batchFiled(status) {
			let idsArr = [];
			this.selectRow.forEach(item => {
				idsArr.push(item.id);
			});
			this.$service.comm
				.batchFiled({
					repository: 'classify',
					status: status,
					ids: idsArr.join(',')
				})
				.then(() => {
					this.crud.refresh();
				});
		},
		onSwitchChange(e, item) {
			this.$service.goods.classify
				.update({
					id: item.id,
					status: e
				})
				.then(() => {
					this.crud.refresh();
				})
				.catch(err => {
					this.$message.error(err);
				});
		}
	}
};
</script>

<style lang="stylus" scoped>
.content {
    .goods-info {
        flexBox(space-between, flex-start)
        img {
            width: 80px;
            height: 80px;
            margin-right 10px
        }
        .goods-content {
            flex: 1;
            .price {
                span {
                    color: $main-color
                }
            }
        }
    }
    .classify-icon {
        width: 80px;
        height: 80px;
    }
}
</style>
